<template>
    <el-row>
        <div class="panel">
            <panel-title :title="$route.meta.title"></panel-title>
            <div class="panel-body">
                <div ref="chartsA" style="height: 700px"></div>
            </div>
        </div>
        <el-col :span="12">
            <div class="panel" style="margin-right: 10px">
                <panel-title :title="$route.meta.title"></panel-title>
                <div class="panel-body">
                    <div ref="chartsB" style="height: 400px"></div>
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="panel" style="margin-left: 10px">
                <panel-title :title="$route.meta.title"></panel-title>
                <div class="panel-body">
                    <div ref="chartsC" style="height: 400px"></div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script type="text/javascript">
    import {panelTitle} from 'components'

    export default{
        data(){
            return {
                echarts_instance: null
            }
        },
        created(){
            this.get_echarts_instance()
        },
        methods: {
            get_echarts_instance(){
                //按需引入 ECharts 图表和组件，这里先全部引入
                require(['echarts'], (echarts) => {
                    this.echarts_instance = echarts
                this.create_chartsA()
                this.create_chartsB()
                this.create_chartsC()
            })
            },
            create_chartsA(){
                let _dom = this.$refs.chartsA
                let myChart = this.echarts_instance.init(_dom)

                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['利润', '支出', '收入']
                    },
                    grid: {
                        left: '16px',
                        right: '16px',
                        bottom: '16px',
                        top: '40px',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    series: [
                        {
                            name: '利润',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: [200, 170, 240, 244, 200, 220, 210]
                        },
                        {
                            name: '收入',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true
                                }
                            },
                            data: [320, 302, 341, 374, 390, 450, 420]
                        },
                        {
                            name: '支出',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'left'
                                }
                            },
                            data: [-120, -132, -101, -134, -190, -230, -210]
                        }
                    ]
                })

            },
            create_chartsB(){
                let _dom = this.$refs.chartsB
                let myChart = this.echarts_instance.init(_dom)
                var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
                var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
                var yMax = 500;
                var dataShadow = [];

                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }

                let option = {
                    grid: {
                        left: '16px',
                        right: '16px',
                        bottom: '16px',
                        top: '16px',
                        containLabel: true
                    },
                    xAxis: {
                        data: dataAxis,
                        axisLabel: {
                            inside: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        { // For shadow
                            type: 'bar',
                            itemStyle: {
                                normal: {color: 'rgba(0,0,0,0.05)'}
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: dataShadow,
                            animation: false
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: new this.echarts_instance.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#83bff6'},
                                                {offset: 0.5, color: '#188df0'},
                                                {offset: 1, color: '#188df0'}
                                            ]
                                    )
                                },
                                emphasis: {
                                    color: new this.echarts_instance.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#2378f7'},
                                                {offset: 0.7, color: '#2378f7'},
                                                {offset: 1, color: '#83bff6'}
                                            ]
                                    )
                                }
                            },
                            data: data
                        }
                    ]
                };
                myChart.setOption(option)
                // Enable data zoom when user click bar.
                var zoomSize = 6;
                myChart.on('click', function (params) {
                    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                    myChart.dispatchAction({
                        type: 'dataZoom',
                        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                    });
                });

            },
            create_chartsC(){
                let _dom = this.$refs.chartsC
                let myChart = this.echarts_instance.init(_dom)
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                    },
                    grid: {
                        left: '16px',
                        right: '16px',
                        bottom: '16px',
                        top: '40px',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '邮件营销',
                            type: 'bar',
                            stack: '广告',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'bar',
                            stack: '广告',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'bar',
                            stack: '广告',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '搜索引擎',
                            type: 'bar',
                            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                            markLine: {
                                lineStyle: {
                                    normal: {
                                        type: 'dashed'
                                    }
                                },
                                data: [
                                    [{type: 'min'}, {type: 'max'}]
                                ]
                            }
                        },
                        {
                            name: '百度',
                            type: 'bar',
                            barWidth: 5,
                            stack: '搜索引擎',
                            data: [620, 732, 701, 734, 1090, 1130, 1120]
                        },
                        {
                            name: '谷歌',
                            type: 'bar',
                            stack: '搜索引擎',
                            data: [120, 132, 101, 134, 290, 230, 220]
                        },
                        {
                            name: '必应',
                            type: 'bar',
                            stack: '搜索引擎',
                            data: [60, 72, 71, 74, 190, 130, 110]
                        },
                        {
                            name: '其他',
                            type: 'bar',
                            stack: '搜索引擎',
                            data: [62, 82, 91, 84, 109, 110, 120]
                        }
                    ]
                })
            }
        },
        components: {
            panelTitle
        },
        destroyed(){
            this.echarts_instance = null
        }
    }
</script>
